<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Events</title>

        <script>
            function click1() {
                alert("点击一下你就知道");
            }
            var click2 = function () {
                alert("我怎么不知道");
            };
            function focus1() {
                alert("你别过来啊！！！");
            }
            function testChange(newValue) {
                console.log("内容发生了改变，变成了" + newValue);
            }
            function testFocus() {
                console.log("获得焦点了");
            }
            function testBlur() {
                console.log("失去焦点了");
            }
            function testPress() {
                console.log("按键按完了");
            }
            function testUp() {
                console.log("按键弹起了");
            }
            function testDown() {
                console.log("按键按下了");
            }
            function testSubmit() {
                /*
                    弹窗的三种方式
                        alert 信息提示框 无返回值
                        prompt 信息输入框 返回值为输入值
                        confirm 信息确认框 返回值为 bool 值
                */
                alert("提交事件触发了");
                var input = prompt("输入你的值");
                var flag =  confirm("你确定你要输入的是这个值吗？虽然你不确定也没用了");
                if (flag) alert(input);
                event.preventDefault(); // 该函数可以阻止组件默认事件的发生 这里就阻止了 submit 事件的发生
                // 除了 event.preventDefault() 可以阻止事件外 也可以通过返回值来阻止

                return false; // 返回给触发这个事件的元素, 这里为 form
            }
        </script>
    </head>
    <body>
        <!-- 一个事件可以绑定多个函数 函数之间使用逗号隔开 -->
        <!-- 一个元素可以绑定多个事件 -->
        <input
            type="button"
            value="一个按钮"
            onclick="click1(), click2()"
            onmouseenter="focus1()"
        />
        <br /><br /><br /><br /><br />

        <!-- <img src="https://img1.baidu.com/it/u=694021312,3775939166&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1663" alt="404" onmousedown="focus1()" height="1080px"> -->

        <!-- 表单提交事件 onsubmit 是由 form 标签来触发的 -->
        <!-- onreset 清空事件也往这里放 -->
        <!-- 将 testSubmit 的返回值返回给浏览器 如果浏览器接收到 false 就不会执行 onsubmit 事件 -->
        <form action="./引入js.html" method="get" onsubmit="return testSubmit()">
            <!-- 
                内容发生改变事件的触发 既需要内容真的发生改变 也需要输入框失去焦点
                onchange 事件所绑定的函数可以带有参数 其参数元素的 value 值
            -->
            登录账号：<input
                type="text"
                name="usrName"
                onfocus="testFocus()"
                onblur="testBlur()"
                onchange="testChange(this.value)"
            />
            <br />
            登录密码：<input
                type="password"
                name="usrPwd"
                onkeypress="testPress()"
                onkeyup="testUp()"
                onkeydown="testDown()"
            />
            <br />
            <br />
            <input type="submit" value="登录" /> &nbsp; &nbsp;
            <input type="reset" value="重置" />
            <br />
            <!-- 
                下拉选择框也可以使用 onchange 属性
                option 在不指定 value 值时 默认为双标签中间的文本
            -->
            性别
            <select name="gender" id="gender" onchange="testChange(this.value)">
                <option value="0">女</option>
                <option value="1">男</option>
                <option value="2">沃尔玛塑料袋</option>
                <option value="3">武装直升机</option>
                <option value="4">lgbt</option>
                <option value="5" selected>I Don't Know</option>
            </select>
            <br />
            <!-- 单选框或者多选框中的一个也可以使用 onchange事件 -->
            爱好
            <input
                type="checkbox"
                name="hobby"
                value="0"
                checked
                onchange="testChange()"
            />
            唱 <input type="checkbox" name="hobby" value="1" checked /> 跳
            <input type="checkbox" name="hobby" value="2" checked /> rap
            <input type="checkbox" name="hobby" value="3" checked /> 篮球🏀
            <input type="checkbox" name="hobby" value="4" /> 当小黑子
        </form>
    </body>
</html>
